<template>
    <div>
        <el-container direction="vertical">
            <el-header>
                <el-row>
                    <el-col :span="2"><GoBack></GoBack></el-col>
                    <el-col :span="20"><label>{{ $t('reset_password.text')}}</label></el-col>
                    <el-col :span="2"><SwitchLang @switchLang="switchLang"></SwitchLang></el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="7" :offset="8">
                        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-suffix="：">
                            <el-form-item :label="$t('reset_password.email')" prop="email">
                                <el-input v-model="form.email" clearable :placeholder="$t('reset_password.email_ph')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('reset_password.captcha')" prop="captchaBean.captcha">
                                <el-row type="flex" justify="space-between">
                                    <el-col :span="15">
                                        <el-input v-model="form.captchaBean.captcha" clearable
                                            :placeholder="$t('reset_password.captcha_ph')"></el-input>
                                    </el-col>
                                    <el-col :span="8">
                                        <EmailCaptchaButton :btnLabel="codeBtnText" :btnEmail="form.email" @sendCaptchaSuccess="sendCaptchaSuccess"></EmailCaptchaButton>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item :label="$t('reset_password.password')" prop="password">
                                <el-input v-model="form.password" clearable show-password
                                    :placeholder="$t('reset_password.password_ph')"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('reset_password.confirm_password')" prop="confirmPassword">
                                <el-input v-model="form.confirmPassword" clearable show-password
                                    :placeholder="$t('reset_password.confirm_password_ph')"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="width-100" type="primary" :loading="load" @click="submitPassword">{{ $t('reset_password.button')}}</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import SwitchLang from '@/components/SwitchLang';
import GoBack from '@/components/GoBack';
import EmailCaptchaButton from '@/components/EmailCaptchaButton';
import { emailValid, passwordValid, authCodeValid } from '@/validate/resetPassword';
import { resetPassword } from '@/api/regedit';

export default {
    name: 'resetPassword',
    components:{
        SwitchLang,
        GoBack,
        EmailCaptchaButton
    },
    data() {
        return {
            load: false,
            codeBtnLoad: false,
            codeBtnText: this.$t('reset_password.send_email_captcha'),
            form: {
                email: "",
                password: "",
                confirmPassword: "",
                captchaBean: {
                    captcha: "",
                    sessionId: ""
                }
            },
            rules: {
                email: emailValid,
                password: passwordValid,
                confirmPassword: [
                    {
                        required: true,
                        trigger: ['blur', 'change'],
                        validator: (rule, value, callback)=>{
                            if(!value) {
                                callback(new Error(this.$t('reset_password.password_valid_fail')));
                            }else if(value !== this.form.password) {
                                callback(new Error(this.$t('reset_password.repassword_valid_fail')));
                            }else{
                                callback();
                            }
                        }
                    }
                ],
                captchaBean: {
                    captcha: authCodeValid
                }
            }
        }
    },
    methods: {
        submitPassword(){
            this.load = true;
            this.$refs.form.validate(valid=>{
                if(valid){//验证通过的代码
                    resetPassword(this.form).then(res=>{
                        const{code, msg} = res;
                        if(code===200){
                            this.$message.success(this.$t('reset_password.reset_password_success'));
                            this.$router.replace('/login')//修改密码成功
                        }else{
                            this.$message.error(msg);
                            this.load = false;
                        }
                    });
                }else{//验证不通过的代码
                    this.load = false;
                }
            });
        },
        switchLang(lang){//SwitchLang子组件向父组件传值，修改按钮上的语言
            // console.log(lang);
            this.$refs.form.clearValidate();//清除表单上的校验
            this.codeBtnText = this.$t('reset_password.send_email_captcha');
        },
        sendCaptchaSuccess(sessionId){//接收发送邮箱验证码组件返回的 sessionId
            console.log(`发送验证码到指定邮箱成功${sessionId}`);
            this.form.captchaBean.sessionId = sessionId;
        }
    }
}

</script>
<style scoped>

</style>